<template>
	<view class="page_box">
		<view class="head_box ">
			<yy-custom bgColor="bg-gradual-blue" v-if="0">
				<block slot="backText">返回</block>
				<block slot="content">导航栏</block>
			</yy-custom>
		</view>

		<view class="content_box padding flex flex-direction">
			<view class="info flex justify-between align-center" @click="click(2)">
				<image
					:src="data.headimgurl"
					mode="aspectFill"
					style="width: 120rpx; height: 120rpx;"
					class=" round"
				></image>
				<view class="flex align-center  text-gray">
					<text class="f28">点击更换头像</text>
					<text class="cuIcon-right margin-left-xs"></text>
				</view>
			</view>
			<view class="padding-tb flex justify-between">
				<text>昵称</text>
				<view class="flex align-center  text-gray">
					<text class="f28" @click="click(3)" v-if="flg">
						{{ data.nickname ? data.nickname : '平台用户' }}
					</text>
					<input
						@blur="modify"
						@confirm="modify"
						type="text"
						value=""
						v-model="nickname"
						v-else
						placeholder="请输入更改的昵称~~"
						placeholder-class="ddd"
					/>
					<text class="cuIcon-right margin-left-xs"></text>
				</view>
			</view>
			<view class="padding-tb flex justify-between">
				<text>手机</text>
				<view class="flex align-center  text-gray">
					<text class="f28">{{ data.tel }}</text>
					<text class="cuIcon-right margin-left-xs"></text>
				</view>
			</view>
			<!-- <view class="padding-tb flex justify-between">
				<text>微信</text>
				<view class="flex align-center  text-gray">
					<text class="f28">微信</text>
					<text class="cuIcon-right margin-left-xs"></text>
				</view>
			</view> -->
			<view class="padding-tb flex justify-between">
				<text>等级</text>
				<view class="flex align-center  text-gray">
					<text class="f28">{{ data.level }}</text>
					<text class="cuIcon-right margin-left-xs"></text>
				</view>
			</view>
			<view class="padding-tb flex justify-between" @click="click(1)">
				<text>修改密码</text>
				<view class="flex align-center  text-gray">
					<text class="cuIcon-right margin-left-xs"></text>
				</view>
			</view>
			
			<view class="padding-tb flex justify-between" @click="click(4)">
				<text>退出登陆</text>
				<view class="flex align-center  text-gray">
					<text class="cuIcon-right margin-left-xs"></text>
				</view>
			</view>
		</view>
		
		<u-modal v-model="show1" :show-cancel-button="true" @confirm="confirm" :content="content"></u-modal>
		
		
		
		<view class="foot_box"></view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			data: {},
			flg: true,
			nickname: '',
			content: '确定退出登陆!',
			show1: false,
		};
	},
	onShow() {},
	onLoad(e) {
		this.gettingInfo();
	},
	methods: {
		confirm() {
			this.show1 = false
			uni.removeStorageSync('data');
			uni.navigateTo({
				url: '/pages/login/login'
			})
		},

		jump(url) {
			console.log('url: ', url);
			uni.navigateTo({
				url
			});
		},
		async gettingInfo() {
			const res = await this.$u.get('user/' + uni.getStorageSync('data').id, {}, {});
			if (res.code == 1) {
				return false;
			}
			this.data = res.data;
		},
		click(e) {
			switch (e) {
				case 1:
					this.jump('/pages/login/forgotPwd');
					break;
				case 2:
					this.chgAvatar();
					break;
				case 3:
					this.flg = !this.flg;
					break;
					case 4:
						this.show1 = true
						break;
				default:
					break;
			}
		},
		//更换头像
		async chgAvatar() {
			const [, x] = await uni.chooseImage({ count: 6 });
			
			console.log('x :>> ', x);
			let path = x.tempFilePaths[0];
			uni.uploadFile({
				url: this.$API_URL + '/upload/upload', //仅为示例，非真实的接口地址
				filePath: path,
				name: 'uploadFile',
				success: uploadFileRes => {
					this.replace(JSON.parse(uploadFileRes.data).link);
				}
			});
		},
		async replace(headimgurl) {
			let obj = {
				id: uni.getStorageSync('data').id,
				headimgurl
			};
			const res = await this.$u.post('user/modify', obj, {});
			if (res.code == 0) {
				this.$refs.uToast.show({ title: res.data, type: 'success' });
				this.gettingInfo();
			}
		},
		async modify() {
			let obj = {
				id: uni.getStorageSync('data').id,
				nickname: this.nickname
			};
			const res = await this.$u.post('user/modify', obj, {});
			if (res.code == 0) {
				this.$refs.uToast.show({ title: res.data, type: 'success' });
				this.gettingInfo();
				// this.flg = true;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.page_box {
	.content_box {
		/deep/.ddd {
			font-size: 28rpx !important;
			font-family: PingFang SC !important;
			font-weight: 500 !important;
			color: #717171 !important;
		}
		/deep/ input {
			text-align: right;
			width: 40vw !important;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500 !important;
			color: #717171 !important;
		}
	}
}
</style>
